<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<style>
	.requiredData-success {
		color: #fff;
		background: #5cb85c;
	}
	.requiredData-default {
		color: #000;
		background: #eeeeee;
	}

	.colStyle {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	/*自动换行*/
	.snow-wrap {
		word-wrap:break-word;
		white-space: normal;
	}
</style>
<body class="gray-bg">
<div class="ui-layout-west">
	<div class="main-content">
		<div class="box box-main">
			<div class="box-header">
				<div class="box-title">
					<i class="fa icon-grid"></i> 接口项目
				</div>
				<div class="box-tools pull-right">
					<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新"><i class="fa fa-refresh"></i></button>
				</div>
			</div>
			<div class="ui-layout-content">
				<div id="tree" class="ztree"></div>
			</div>
		</div>
	</div>
</div>
<div class="container-div ui-layout-center">
	<div class="row">
		<!--<div class="col-sm-12 select-info">-->
			<!--<form id="connector-form">-->
				<!--<input type="hidden" id="apiProjectnameId" name="apiProjectnameId">-->
				<!--<input type="hidden" id="parentId" name="parentId">-->
				<!--<div class="select-list">-->
					<!--<ul>-->
						<!--<li>-->
							<!--接口名称：<input type="text" name="interfacename"/>-->
						<!--</li>-->
						<!--<li>-->
							<!--接口描述：<input type="text" name="description"/>-->
						<!--</li>-->
						<!--<li>-->
							<!--&nbsp;&nbsp;&nbsp;&nbsp;创建人：<input type="text" name="createBy"/>-->
						<!--</li>-->
						<!--<li class="select-time">-->
							<!--<label>创建时间： </label>-->
							<!--<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>-->
							<!--<span>-</span>-->
							<!--<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>-->
						<!--</li>-->
						<!--<li>-->
							<!--<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
							<!--&lt;!&ndash;<a class="btn btn-success btn-rounded btn-sm" onclick="$.table.exportExcel()" shiro:hasPermission="system:user:export"><i class="fa fa-download"></i>&nbsp;导出</a>&ndash;&gt;-->
						<!--</li>-->
					<!--</ul>-->
				<!--</div>-->
			<!--</form>-->
		<!--</div>-->
		<div class="white-bg">
			<table width="100%">
				<tr>
					<td>
						<div class="form-group">
							<label class="col-sm-3 control-label">接口url全路径：</label>
							<div class="col-sm-8">
								<input id="domainUrl" name="domainUrl" class="form-control" type="text" readonly="true">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">请求类型：</label>
							<div class="col-sm-8">
								<!--<input id="method" name="method" class="form-control" type="text" readonly="true">-->
								<div class="form-control" id="method" name="method"></div>
							</div>
						<!--</div>-->
						<!--<div class="form-group">-->
						<!--<label class="col-sm-3 control-label">接口名称：</label>-->
						<!--<div class="col-sm-8">-->
						<!--<input id="interfacename" name="interfacename" class="form-control" type="text">-->
						<!--</div>-->
						<!--</div>-->
						<div class="form-group">
							<label class="col-sm-3 control-label">接口描述：</label>
							<div class="col-sm-8">
								<input id="description" name="description" class="form-control" type="text" readonly="true">
							</div>
						</div>
						</div>
					</td>
					<td>
						<!--<div class="form-group">-->
						<!--<label class="col-sm-3 control-label">创建者：</label>-->
						<!--<div class="col-sm-8">-->
						<!--<input id="createBy" name="createBy"  class="form-control" type="text" readonly="true">-->
						<!--</div>-->
						<!--</div>-->
						<!--<div class="form-group">-->
						<!--<label class="col-sm-3 control-label">创建时间：</label>-->
						<!--<div class="col-sm-8">-->
						<!--<input id="createTime" name="createTime" class="form-control" type="text" readonly="true">-->
						<!--</div>-->
						<!--</div>-->
						<!--<div class="form-group">-->
						<!--<label class="col-sm-3 control-label">更新者：</label>-->
						<!--<div class="col-sm-8">-->
						<!--<input id="updateBy" name="updateBy" class="form-control" type="text" readonly="true">-->
						<!--</div>-->
						<!--</div>-->
						<!--<div class="form-group">-->
						<!--<label class="col-sm-3 control-label">更新时间：</label>-->
						<!--<div class="col-sm-8">-->
						<!--<input id="updateTime" name="updateTime" class="form-control" type="text" readonly="true">-->
						<!--</div>-->
						<!--</div>-->
						<div class="form-group">
							<label class="col-sm-3 control-label">备注：</label>
							<div class="col-sm-8">
								<textarea  id="remark" name="remark" class="form-control"  rows="3" cols="20" readonly="true"></textarea>
							</div>
						</div>
					</td>
				</tr>
			</table>
		</div>


		<form id="response_form" >
			<input type="hidden" id="apiProjectnameId_response" name="apiProjectId">
			<input type="hidden" id="parentId_response" name="parentIdResponse">
		</form>

		<form id="parameter_form" >
			<input type="hidden" id="apiProjectnameId_parameter" name="apiProjectnameId">
			<input type="hidden" id="parentId_parameter" name="parentId">
		</form>

		<div class="col-sm-12 select-table ">
            <!--style="white-space:nowrap;"-->
			<table id="bootstrap_table_parameter" data-mobile-responsive="true" style="white-space:nowrap;"></table>
		</div>



		<form id="errorcode_form" >
			<input type="hidden" id="apiProjectnameId_errorcode" name="apiProjectnameId">
			<input type="hidden" id="parentId_errorcode" name="parentId">
		</form>

		<div class="col-sm-12 select-table ">
			<table id="bootstrap_table_response" data-mobile-responsive="true" class="table table-bordered table-hover table-striped" ></table>
		</div>

		<div class="col-sm-12 select-table ">
			<h2 id="errorGroup" align="center" style=" vertical-align: middle;">
			</h2>
		</div>
		<div class="col-sm-12 select-table ">
			<table id="bootstrap_table_errorcode" data-mobile-responsive="true" style="white-space:nowrap;"></table>
		</div>
		<div class="white-bg">
            <!--width="100%"-->
			<table align="center" >
				<tr>
					<td nowrap="nowrap" >
						<div class="container-div ui-layout-center">
							<div class="row">
								<div class="form-group">
									<label class="col-sm-3 control-label">请求参数说明：</label>
								</div>
							</div>
						</div>
					</td>
					<td >
						<div class="col-sm-12">
							<div id="parameter_content" ></div>
						</div>
					</td>
				</tr>

				<tr>
					<td nowrap="nowrap" >
						<div class="container-div ui-layout-center">
							<div class="row">
								<div class="form-group">
									<label class="col-sm-3 control-label">请求主体说明：</label>
								</div>
							</div>
						</div>
					</td>
					<td >
						<div class="col-sm-12">
							<div id="postbody_content" ></div>
						</div>
					</td>
				</tr>
				<tr>
					<td nowrap="nowrap">
						<div class="container-div ui-layout-center">
							<div class="row">
								<div class="form-group">
									<label class="col-sm-3 control-label">返回信息说明：</label>
								</div>
							</div>
						</div>
					</td>
					<td >
						<div class="col-sm-12">
							<div id="result_content" ></div>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>
	<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
    <script th:inline="javascript">
        var errorGroup=0;

        var editFlag = [[${@permission.hasPermi('module:connector:edit')}]];
        var removeFlag = [[${@permission.hasPermi('module:connector:remove')}]];
        var prefix = ctx + "module/apiview";
        var prefix_errorcode = ctx + "module/errorcode";
        var prefix_parameter = ctx + "module/parameter";
        var prefix_response = ctx + "module/response";
        var responseValueTypeDatas = [[${@dict.getType('response_value_type')}]];
        var paramTransmissionMode = [[${@dict.getType('param_transmission_mode')}]];

        var valueTypeDatas = [[${@dict.getType('api_value_type')}]];

        var requiredDatas = [{"dictLabel":"√","dictValue":"1","listClass":"success"},
            {"dictLabel":"×","dictValue":"0","listClass":"default"}];
        var methodDatas = [[${@dict.getType('api_http_method')}]];

        $(function() {
            $('body').layout({ west__size: 185 });
            queryProjectTree();
            queryErrorcodeList();
            queryParameterList();
            queryResponseList();
        });



        function queryResponseList(){
            treeTableResponse=$('#bootstrap_table_response').bootstrapTreeTable({
                code : 'responseCode',             // 用于设置父子关系
                parentCode : 'parentResponseCode', // 用于设置父子关系
                type: 'get',                   // 请求方式（*）
                url: prefix_response+'/listtree',              // 请求后台的URL（*）
                expandColumn : '0',            // 在哪一列上面显示展开按钮
                striped : false,               // 是否各行渐变色
                bordered : true,               // 是否显示边框
                expandAll : true, // 是否全部展开
                toolbar: '#toolbar_response',
                showToggle: true,   // 是否显示详细视图和列表视图的切换按钮
                detailView:true,
                detailFormatter:function(index,row){
                    var str = "<form class='form-horizontal'> ";
                    str+= "<div class='fix-margin-horizontal form-group' style='margin-left:10%'>";
                    str+= "<div class='col-sm-fix-4'><span class='form-control' style='border:0px;'>"+row.paramMock+"</span></div>";
                    str+= "</div></form>";
                    return str;
                },
                columns: [
                    {
                        field : 'responseId',
                        title : 'ID',
                        align:'center'
                    },{
                        field : 'paramName',
                        title : '返回值字段',
                        align:'center'
                    },{
                        field : 'paramMock',
                        title : '参考值',
                        align:'center',
                        class:'colStyle',
						// formatter: paramsMatter,
                        formatter: function(value, row, index) {
                            var valueTemp=$.snowUtils.htmlEncode(value);
                            return '<div class="snow-wrap">' +valueTemp+
                                '</div>';
                        }
                    },{
                        field : 'paramDesc',
                        title : '返回值描述',
                        align :'center',
                        formatter: function(value, row, index) {
                            var valueTemp=$.snowUtils.htmlEncode(value);
                            return '<div class="snow-wrap">' +valueTemp+
								'</div>';
                        }
                    },{
                        field : 'paramType',
                        title : '返回值类型',
                        align:'center',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(responseValueTypeDatas,value);
                        }
                    },{
                        field : 'defaultValue',
                        title : '默认值',
                        align:'center'
                    }
                ]
            });

        }

        function queryParameterList() {
            $('#bootstrap_table_parameter').bootstrapTable({
                url: prefix_parameter + "/list",
                contentType: "application/x-www-form-urlencoded",   // 编码类型
                method: 'post',                                     // 请求方式（*）
                cache: false,                                       // 是否使用缓存
                sortable: true,                                     // 是否启用排序
                sortStable: true,                                   // 设置为 true 将获得稳定的排序
                // sortName: _sortName,                                // 排序列名称
                // sortOrder: _sortOrder,                              // 排序方式  asc 或者 desc
                pagination: true,   // 是否显示分页（*）
                pageNumber: 1,                                      // 初始化加载第一页，默认第一页
                pageSize: 10,                                       // 每页的记录行数（*）
                pageList: [10, 25, 50],                             // 可供选择的每页的行数（*）
                iconSize: 'outline',                                // 图标大小：undefined默认的按钮尺寸 xs超小按钮sm小按钮lg大按钮
                sidePagination: "server",                           // 启用服务端分页
                search: true,           // 是否显示搜索框功能
                showRefresh: true, // 是否显示刷新按钮
                showColumns: true, // 是否显示隐藏某列下拉框
                showToggle: true,   // 是否显示详细视图和列表视图的切换按钮
                showExport: true,   // 是否支持导出文件
                queryParams: function(params) {// 查询参数设置
                    return {
                        // 传递参数查询参数
                        pageSize:       params.limit,
                        pageNum:        params.offset / params.limit + 1,
                        searchValue:    params.search,
                        orderByColumn:  params.sort,
                        isAsc:          params.order
                    }
                },
                // detailView:true,
                // detailFormatter:function(index,row){
                //     var str = "<form class='form-horizontal'> ";
                //     str+= "<div class='fix-margin-horizontal form-group' style='margin-left:10%'>";
                //     str+= "<div class='col-sm-fix-4'><span class='form-control' style='border:0px;'>"+row.parameter+"</span></div>";
                //     str+= "</div></form>";
                //     return str;
                // },
                columns: [
				{
					field : 'parameter',
					title : '参数名称'
				},
				{
					field : 'description',
					title : '参数描述'
				},
                {
                    field : 'transmissionMode',
                    title : '传参方式',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(paramTransmissionMode, value);
                    }
                },
				{
					field : 'defaultValue',
					title : '默认值'
				},
				{
					field : 'referenceValue',
					title : '参考值',
                    class : 'snow-wrap'
				},
				{
					field : 'valueType',
					title : '值类型',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(valueTypeDatas, value);
                    }
				},
				{
					field : 'required',
					title : '是否必填',
                    formatter: function(value, row, index) {
                        var actions = [];
                        $.each(requiredDatas, function(index, dict) {
                            if (dict.dictValue == value) {
                                actions.push("<span class='badge requiredData-" + dict.listClass + "'>" + dict.dictLabel + "</span>");
                                return false;
                            }
                        });
                        return actions.join('');
                    }
				},
				{
					field : 'remark',
					title : '备注'
				}],                           // 显示列信息（*）
                responseHandler: responseHandler_parameter            // 回调函数
            });
        }

        function queryErrorcodeList() {
            $('#bootstrap_table_errorcode').bootstrapTable({
                url: prefix_errorcode + "/list",
                contentType: "application/x-www-form-urlencoded",   // 编码类型
                method: 'post',                                     // 请求方式（*）
                cache: false,                                       // 是否使用缓存
                sortable: true,                                     // 是否启用排序
                sortStable: true,                                   // 设置为 true 将获得稳定的排序
                sortName: 'updateTime',                                // 排序列名称
                sortOrder: 'desc',                              // 排序方式  asc 或者 desc
                pagination: true,   // 是否显示分页（*）
                pageNumber: 1,                                      // 初始化加载第一页，默认第一页
                pageSize: 10,                                       // 每页的记录行数（*）
                pageList: [10, 25, 50],                             // 可供选择的每页的行数（*）
                iconSize: 'outline',                                // 图标大小：undefined默认的按钮尺寸 xs超小按钮sm小按钮lg大按钮
                sidePagination: "server",                           // 启用服务端分页
                search: true,           // 是否显示搜索框功能
                showRefresh: true, // 是否显示刷新按钮
                showColumns: true, // 是否显示隐藏某列下拉框
                showToggle: true,   // 是否显示详细视图和列表视图的切换按钮
                showExport: true,   // 是否支持导出文件
                queryParams: function(params) {// 查询参数设置
                    return {
                        // 传递参数查询参数
                        pageSize:       params.limit,
                        pageNum:        params.offset / params.limit + 1,
                        searchValue:    params.search,
                        orderByColumn:  params.sort,
                        isAsc:          params.order
                    }
                },
                columns: [
				{
					field : 'errorcode',
					title : '错误代码编号'
				},
                {
                    field : 'errorcode2',
                    title : '错误代码',
                    formatter: function(value, row, index) {
                        var valueTemp="";
                        valueTemp=(errorGroup<<12)+row.errorcode;
                        if(errorGroup==0){
                            return "";
						}

                        return valueTemp;
                    }

                },
				{
					field : 'description',
					title : '前端提示'
				},
				{
					field : 'remark',
					title : '备注'
				}],                           // 显示列信息（*）
                responseHandler: responseHandler_errorcode            // 回调函数
            });
        }


        function queryConnector(projectid) {
            var url = prefix + '/findByProjectnameId/' + projectid;
            // window.open(url, "_blank");
            $.ajax({
                cache : true,
                type : "POST",
                url : url,
                async : false,
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    console.log(data);
                    if(data.domainUrl!=undefined){
                    	if(data.domainUrl.indexOf("http")==0){
                    	    domainUrl=data.domainUrl.replace(/\/\//g,"/");
                    	    console.log("domainUrl1=",domainUrl);
							domainUrl=domainUrl.replace(/http:\//g,"http://");
							console.log("domainUrl2=",domainUrl);
							domainUrl=domainUrl.replace(/https:\//g,"https://");
							console.log("domainUrl3=",domainUrl);
							$("#domainUrl").val(domainUrl);
						}else{
							$("#domainUrl").val("http://"+data.domainUrl.replace(/\/\//g,"/"));
						}
                    }else{
                        $("#domainUrl").val("");
					}

                    $("#method").html($.table.selectDictLabel(methodDatas, data.method));


					$("#description").val(data.description);
                    $("#remark").val(data.remark)
					$("#parameter_content").html(data.parameters);
                    $("#postbody_content").html(data.postbody);
                    $("#result_content").html(data.result);
                    if(data.errorGroup==undefined){
                        errorGroup=0;
                        $("#errorGroup").html("");
                    }else{
                        errorGroup=data.errorGroup;
                        $("#errorGroup").html("错误组："+data.errorGroup);
					}
                }
            });
        }

        function queryProjectTree()
        {
            var url = ctx + "module/project/treeData";
            var options = {
                url: url,
                expandLevel: 0,
                onClick : zOnClick
            };
            $.tree.init(options);
        }

            function zOnClick(event, treeId, treeNode) {
                reloadChildTable(treeNode);

                var stateObject = {};
                var title = "接口查看";
                var newUrl = prefix+"/uniqueid/"+treeNode.id+"/";
                window.history.pushState(stateObject,title,newUrl);

            }

            function reloadChildTable(treeNode) {

                queryConnector(treeNode.id);

                $("#apiProjectnameId_errorcode").val(treeNode.id);
                $("#parentId_errorcode").val(treeNode.pId);
                searchErrorcode();

                $("#apiProjectnameId_parameter").val(treeNode.id);
                $("#parentId_parameter").val(treeNode.pId);
                searchParameter();

                $("#apiProjectnameId_response").val(treeNode.id);
                $("#parentId_response").val(treeNode.pId);
                searchResponse();
            }


            function searchResponse () {
                console.log("searchResponse");
                var currentId = "response_form";
                var params = {};
                $.each($("#" + currentId).serializeArray(), function(i, field) {
                    params[field.name] = field.value;
                });
                console.log(params);
                console.log(treeTableResponse);
                treeTableResponse.bootstrapTreeTable('refresh', params);
            }


        function responseHandler_parameter (res) {
            if (res.code == 0) {
                return { rows: res.rows, total: res.total };
            } else {
                $.modal.alertWarning(res.msg);
                return { rows: [], total: 0 };
            }
        }

        function responseHandler_errorcode (res) {
            if (res.code == 0) {
                return { rows: res.rows, total: res.total };
            } else {
                $.modal.alertWarning(res.msg);
                return { rows: [], total: 0 };
            }
        }

        function searchParameter() {

            var currentId = "parameter_form";
            var params = $("#bootstrap_table_parameter").bootstrapTable('getOptions');
            params.queryParams = function(params) {
                var search = {};
                $.each($("#" + currentId).serializeArray(), function(i, field) {
                    search[field.name] = field.value;
                });
                search.pageSize = params.limit;
                search.pageNum = params.offset / params.limit + 1;
                search.searchValue = params.search;
                search.orderByColumn = params.sort;
                search.isAsc = params.order;
                return search;
            }
            $("#bootstrap_table_parameter").bootstrapTable('refresh', params);
        }

        function searchErrorcode() {

            var currentId = "errorcode_form";
            var params = $("#bootstrap_table_errorcode").bootstrapTable('getOptions');
            params.queryParams = function(params) {
                var search = {};
                $.each($("#" + currentId).serializeArray(), function(i, field) {
                    search[field.name] = field.value;
                });
                search.pageSize = params.limit;
                search.pageNum = params.offset / params.limit + 1;
                search.searchValue = params.search;
                search.orderByColumn = params.sort;
                search.isAsc = params.order;
                return search;
            }
            $("#bootstrap_table_errorcode").bootstrapTable('refresh', params);
        }

        $('#btnExpand').click(function() {
            $._tree.expandAll(true);
            $(this).hide();
            $('#btnCollapse').show();
        });

        $('#btnCollapse').click(function() {
            $._tree.expandAll(false);
            $(this).hide();
            $('#btnExpand').show();
        });

        $('#btnRefresh').click(function() {
            queryProjectTree();
        });

        /*接口文档-接口项目*/
        function project() {
            var url = ctx + "module/project";
            createMenuItem(url, "接口项目");
        }


             function paramsMatter(value, row, index) {
                var values = value;
                if(!$.common.isEmpty(values)){
                    values = values.replace(/\s+/g,'&nbsp;')//替换空格
                    values = values.replace(/\},/,'},\n');//换行
                }
                var span=document.createElement('span');
                span.setAttribute('title',values);
                span.innerHTML = value;
                return span.outerHTML;
            }
    </script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var id = [[${uniqueid}]];
    /*]]>*/
    if(id!=undefined){

        console.log("uniqueid="+id);
        var zTree_Menu = $.fn.zTree.getZTreeObj("tree");

        function positioningNode(){
            // console.log(zTree_Menu);
            setTimeout(function () {
                zTree_Menu = $.fn.zTree.getZTreeObj("tree");
                // console.log(zTree_Menu);
                if(zTree_Menu!=undefined){
                    var nodeList = $._tree.getNodesByParam("id",id );
                    for (var i=0, l=nodeList.length; i<l; i++) {
                        var node=nodeList[i];
                        zTree_Menu.expandNode(node, true, false, false);
                        zTree_Menu.selectNode(node,true);//指定选中ID的节点
                        reloadChildTable(node);

                    }

                }else {
                    positioningNode();
                }
            }, 1000);
        }

        positioningNode();
    }


</script>
</body>
</html>